<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useTag } from "../store/tag.ts"
import { useRouter } from "vue-router";
const storeTag = useTag()
const router = useRouter();

import { storeToRefs } from "pinia";

const { currentlyActive, getOpenTags,addTag } = storeToRefs(storeTag)
console.log('当前活跃', currentlyActive.value.key);
const currentlyActiveid = ref('0_2');
onMounted(() => {
  currentlyActiveid.value = currentlyActive.value.key
})
const props = defineProps({
  displayNavigation: {
    type: Boolean,
    default: true
  },
  path: {
    type: Array,
    default: ['', '', '']
  },
  spacing: {
    type: String,
    default: '0 16px 0 16px'
  }
})
const click_tab = (item) => {
  getOpenTags.value.forEach( (it) => {
    if (it.key == item) {
      storeTag.addTag(it)
      router.push({
        name: it.title,
      })
      
    }
  })

}
const handleDelete = (key: string) => {
  storeTag.removeTag(key)
};
</script>
<template>
  <div class="container h100">
    <div class="nav_tag">
      <a-breadcrumb v-if="props.displayNavigation" class="breadcrumbNavigation w100">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>Channel</a-breadcrumb-item>
        <a-breadcrumb-item>News</a-breadcrumb-item>
      </a-breadcrumb>
      <a-tabs hide-content :show-add-button="false" type="card-gutter" :editable="true"
        v-model:active-key="currentlyActiveid" @delete="handleDelete" @tab-click="click_tab">
        <a-tab-pane v-for="item of storeTag.getOpenTags" :key="item.key" :title="item.title + item.key" :closable="true">
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="cont">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
@keyframes show {
  0% {
    transform: scale(0.99);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.container {
  animation: show 1s;
  position: relative;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;

  .nav_tag {
    top: 0;
    position: sticky;
    z-index: 100;
    background: #fff;
    box-sizing: border-box;
    padding-left: 20px;
    box-shadow:
      0px 0.8px 3.8px -2px rgba(0, 0, 0, 0.041),
      0px 1.3px 5.7px -2px rgba(0, 0, 0, 0.059),
      0px 1.8px 6.9px -2px rgba(0, 0, 0, 0.076),
      0px 2.5px 8px -2px rgba(0, 0, 0, 0.103),
      0px 4px 10px -2px rgba(0, 0, 0, 0.18);
  }

  .breadcrumbNavigation {
    box-sizing: border-box;
    padding: 20px 0 20px 0;
  }

  .cont {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 6px;
    padding: v-bind(spacing);
  }
}</style>